<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 1000px;
            margin: auto;
        }
        .shi{
            overflow: hidden;
        }
        .shi div{
            width: 12.5%;
            float: left;
            text-align: center;
            padding: 15px 20px;
            box-sizing: border-box;
            border: 1px solid #777;
        }
        .feng span{
            display: block;
            padding: 0px;
            margin: 0px;
        }
        .mday{
            border:1px solid #394;
        }
        .tian{
            margin-top:50px;
        }
        .tian div{
            overflow: hidden;
        }
        .tian p{
            float: left;
            width: 245px;
            text-align: center;
        }
        .zhi{
            width: 100%;
            padding-top: 50px;
            overflow: hidden;
        }
        .col{
            float: left;
            width: 33.333333%;
            height: 140px;
            border: 1px solid #fff;
            background: #daedff;
            box-sizing: border-box;
        }
        .air ,.bi ,.tang ,.yi ,.che ,.uv{
            position: relative;
        }
        .col h2 ,.col em ,.col p{
            margin: 0;
            padding: 0;
            position: absolute;
        }
        .col .tu{
            width: 46px;
            height: 46px;
            background-image: url(iconall.png);
            position: absolute;
            top: 20px;
            left: 50px;
        }
        .air .tu{
            background-position: -107px -171px;
        }
        .col h2{
            top:27px;
            left:134px;
            color: #187db6;
            font-size: 20px;
        }
        .col em{
            font-style: normal;
            font-size: 14px;
            width: 100px;
            text-align: center;
            color: #1570a6;
            top: 84px;
            left: 22px;
        }
        .col p{
            width: 180px;
            height: 50px;
            font-size: 14px;
            color: #818181;
            top:70px;
            left: 134px;
            line-height: 24px;
            overflow: hidden;
        }
        .col .bi .tu{
            background-image: url(pcjf.png);
            width: 60px;
            height: 32px;
            left: 45px;
            top:28px;
        }
        .bi span{
            display: inline-block;
            width: 15px;
            height: 15px;
            background-image: url(star1.png);
        }
        .col .tang .tu{
            background-image: url(xt.png);
            width: 46px;
            height: 54px;
            background-repeat: no-repeat;
            top:19px;
        }
        .col .yi p{
            top:64px;
        }
        .col .yi .tu{
            background-position:-55px -349px;
        }
        .col .che .tu{
            background-position: -53px -398px;
        }
        .col .uv .tu{
            background-position: -153px -251px;
        }




    </style>
</head>
<body>
<div class="container">
        <input type="text" id="ipt" placeholder="请输入要查询的城市">
        <div class="nei">
            <h4>今天</h4>
            <div>城市：<span id="city"></span></div>
            <div>天气：<span id="now"></span></div>
            <div>风向：<span id="wind"></span></div>
            <div>日期：<span id="day"></span></div>
        </div>
    <div class="shi">

    </div>
    <div class="tian"></div>
    <div class="zhi">
        <div class="col">

            <div class="air">
                <div class="tu"></div>
                <h2></h2>
                <em>紫外线指数</em>
                <p></p>
            </div>
        </div>
        <div class="col">
            <div class="bi">
                <div class="tu"></div>
                <h2>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </h2>
                <em>减肥指数</em>
                <p>春天不减肥，夏天徒伤悲。天气较舒适，快去运动吧。</p>
            </div>
        </div>
        <div class="col">
            <div class="tang">
                <div class="tu"></div>
                <h2>不易波动</h2>
                <em>健臻·血糖指数</em>
                <p>天气条件好，血糖不易波动，可适时进行户外锻炼。</p>
            </div>
        </div>
        <div class="col">
            <div class="yi">
                <div class="tu"></div>
                <h2></h2>
                <em>穿衣指数</em>
                <p></p>
            </div>
        </div>
        <div class="col">
            <div class="che">
                <div class="tu"></div>
                <h2></h2>
                <em>洗车指数</em>
                <p></p>
            </div>
        </div>
        <div class="col">
            <div class="uv">
                <div class="tu"></div>
                <h2></h2>
                <em>空气污染扩散指数</em>
                <p></p>
            </div>
        </div>
    </div>
</div>

<script>
    var city="泊头"
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var json=xmlhttp.responseText;
                json=JSON.parse(json);

                console.log(json)

                document.querySelector("#city").innerHTML=json.basic.city;
                document.querySelector("#now").innerHTML=json.now.cond.txt;
                document.querySelector("#wind").innerHTML=json.now.wind.dir+json.now.wind.sc+"级";
                document.querySelector("#day").innerHTML=json.daily_forecast[0].date;

                var sh=document.querySelector(".shi")
                var da=document.querySelector(".tian")
                var co=document.querySelectorAll(".zhi .col")
                for (var i=0;i<json.hourly_forecast.length;i++){
                   var  shi=document.createElement("div");
                    var dian=document.createElement("p");
                    dian.innerHTML =json.hourly_forecast[i].date.substring(11.13);

                    var qii=document.createElement("span");
                    qii.innerHTML=json.hourly_forecast[i].cond.txt;
                    var du=document.createElement("p");
                    du.innerHTML=json.hourly_forecast[i].tmp+"℃";
                    var feng=document.createElement("p");
                    feng.classList.add("feng");
                    feng.innerHTML=json.hourly_forecast[i].wind.dir;
                    var ji=document.createElement("span");
                    ji.innerHTML=json.hourly_forecast[i].wind.sc +"级";




                    sh.appendChild(shi);
                    shi.appendChild(dian)
                    shi.appendChild(qii)
                    shi.appendChild(du)
                    shi.appendChild(feng)
                    feng.appendChild(ji)
                }
                for (var j=0;j<json.daily_forecast.length;j++){
                    var  daay=document.createElement("div");
                    daay.classList.add("mday");
                    var tia=document.createElement("p");
                    tia.innerHTML =json.daily_forecast[j].date;
                    var ri=document.createElement("p");
                    ri.innerHTML =json.daily_forecast[j].cond.txt_d;

                    var wen=document.createElement("p");
                    wen.innerHTML =json.daily_forecast[j].tmp.min+"℃ - "+json.daily_forecast[j].tmp.max+"℃";
                    var ff=document.createElement("p");
                    ff.innerHTML =json.daily_forecast[j].wind.dir+json.daily_forecast[j].wind.sc+"级";



                    da.appendChild(daay)
                    daay.appendChild(tia)
                    daay.appendChild(ri)
                    daay.appendChild(wen)
                    daay.appendChild(ff)

            }

                document.querySelector(".air h2").innerHTML=json.suggestion.uv.brf
                document.querySelector(".air p").innerHTML=json.suggestion.uv.txt
                document.querySelector(".yi h2").innerHTML=json.suggestion.drsg.brf
                document.querySelector(".yi p").innerHTML=json.suggestion.drsg.txt
                document.querySelector(".che h2").innerHTML=json.suggestion.cw.brf
                document.querySelector(".che p").innerHTML=json.suggestion.cw.txt
                document.querySelector(".uv h2").innerHTML=json.suggestion.air.brf
                document.querySelector(".uv p").innerHTML=json.suggestion.air.txt

            }
        }
        xmlhttp.open("GET","https://bird.ioliu.cn/weather?city="+city,true);
        xmlhttp.send();
    }
    loadXMLDoc()

    var ipt = document.querySelector("#ipt")
            ipt.addEventListener("change",function () {
                document.querySelector(".shi").innerHTML=""

                city = this.value

                loadXMLDoc()
                this.value=""
                document.querySelector(".tian").innerHTML=""
            })
</script>
</body>
</html>